<nz-spin *ngIf="isLoading" class="modal-spin"></nz-spin>
<form nz-form *ngIf="!isLoading" [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-label [nzSpan]="5" nzRequired nzFor="title">店铺名称</nz-form-label>
    <nz-form-control [nzSpan]="18" [nzValidateStatus]="validateForm.controls['title']">
      <input type="text" nz-input formControlName="title" placeholder="店铺名称">
      <nz-form-explain *ngIf="validateForm.get('title').dirty && validateForm.get('title').hasError('required')">请输入店铺名称</nz-form-explain>
      <nz-form-explain *ngIf="validateForm.get('title').dirty && validateForm.get('title').hasError('maxlength')">不能超过100个字</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="5" nzFor="mainImg">店铺图</nz-form-label>
    <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['imgKey']">
      <input type="text" nz-input formControlName="imgKey" placeholder="店铺图" style="display: none;">
      <nz-upload class="upload-list-inline"
                 [nzMultiple]="true"
                 [nzAction]="uploadDomain"
                 [nzHeaders]="headers"
                 (nzChange)="handleChange($event)"
                 [nzSize]="2048"
                 nzAccept=".jpg,.jpeg,.png,.gif"
                 nzListType="picture-card"
                 [nzShowUploadList]="false">
        <ng-container *ngIf="!entity.imgKey">
          <i class="anticon anticon-plus"></i>
          <div class="ant-upload-text">上传店铺图</div>
        </ng-container>
        <img *ngIf="entity.imgKey" [src]="entity.imgKey|qCloudDomain" title="点击可修改店铺图" class="avatar">
      </nz-upload>
      <nz-form-explain *ngIf="validateForm.get('imgKey').dirty && validateForm.get('imgKey').hasError('required')">
        请选择店铺图
      </nz-form-explain>
    </nz-form-control>
    <nz-form-extra style="color: orange;">请上传小于2MB的图片<br> 且为了最佳移动端视觉效果，我们建议您添加大小约600*460的图片</nz-form-extra>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="5" nzFor="shopkeeperName">负责人姓名</nz-form-label>
    <nz-form-control [nzSpan]="18" [nzValidateStatus]="validateForm.controls['shopkeeperName']">
      <input type="text" nz-input formControlName="shopkeeperName" placeholder="负责人姓名">
      <nz-form-explain *ngIf="validateForm.get('shopkeeperName').dirty && validateForm.get('shopkeeperName').hasError('required')">请输入负责人姓名</nz-form-explain>
      <nz-form-explain *ngIf="validateForm.get('shopkeeperName').dirty && validateForm.get('shopkeeperName').hasError('maxlength')">不能超过32个字</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="5" nzFor="shopkeeperPhone">负责人手机号</nz-form-label>
    <nz-form-control [nzSpan]="18" [nzValidateStatus]="validateForm.controls['shopkeeperPhone']">
      <input type="text" nz-input formControlName="shopkeeperPhone" placeholder="负责人手机号">
      <nz-form-explain *ngIf="validateForm.get('shopkeeperPhone').dirty && validateForm.get('shopkeeperPhone').hasError('required')">请输入负责人手机号</nz-form-explain>
      <nz-form-explain *ngIf="validateForm.get('shopkeeperPhone').dirty && validateForm.get('shopkeeperPhone').hasError('mobileValidate')">手机号码格式不正确</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="5" nzRequired nzFor="brandId">所属品牌</nz-form-label>
    <nz-form-control [nzSpan]="18" [nzValidateStatus]="validateForm.controls['brandId']">
      <nz-select formControlName="brandId" [nzPlaceHolder]="'所属品牌'">
        <nz-option
          *ngFor="let option of allBrand"
          [nzLabel]="option.name"
          [nzValue]="option.id">
        </nz-option>
      </nz-select>
      <nz-form-explain *ngIf="validateForm.get('brandId').dirty && validateForm.get('brandId').hasError('required')">请选择所属品牌</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="5" nzRequired nzFor="customerId">业务经理</nz-form-label>
    <nz-form-control [nzSpan]="18" [nzValidateStatus]="validateForm.controls['customerId']">
      <nz-select formControlName="customerId" [nzPlaceHolder]="'业务经理只能是业务经理,可输入关键词搜索'" [nzServerSearch]="true" [nzShowSearch]="true" (nzOnSearch)="onSearch($event)" [nzAllowClear]="true">
        <ng-container *ngFor="let option of cusList">
          <nz-option *ngIf="!loadingOption" [nzValue]="option.id" [nzLabel]="option.name"></nz-option>
        </ng-container>
        <nz-option *ngIf="loadingOption" nzDisabled nzCustomContent>
          <i nz-icon type="loading" class="loading-icon"></i> 搜索中
        </nz-option>
      </nz-select>
      <nz-form-extra style="color: orange;padding-top: 10px;">
        说明：业务经理即店铺票据审核人员
      </nz-form-extra>
      <nz-form-explain *ngIf="validateForm.get('customerId').dirty && validateForm.get('customerId').hasError('required')">请选择业务经理</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="5" nzRequired nzFor="cityArea">店铺地区</nz-form-label>
    <nz-form-control [nzSpan]="18" [nzValidateStatus]="validateForm.controls['cityArea']">
      <nz-cascader [nzPlaceHolder]="'请选择店铺地址'"
                   formControlName="cityArea"
                   nzChangeOnSelect
                   [nzOptions]="cityOptions"
                   [nzLabelProperty]="'name'"
                   [nzValueProperty]="'name'"
                   (ngModelChange)="onChanges($event)">
      </nz-cascader>
      <nz-form-explain *ngIf="validateForm.get('cityArea').dirty && validateForm.get('cityArea').hasError('required')">请选择店铺地址</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="5" nzRequired nzFor="address">地址详情</nz-form-label>
    <nz-form-control [nzSpan]="18" [nzValidateStatus]="validateForm.controls['address']">
      <input type="text" nz-input formControlName="address" placeholder="详细地址（如街道、门牌号等）" (change)="addressChange()">
      <nz-form-explain *ngIf="validateForm.get('address').dirty && validateForm.get('address').hasError('required')">请输入地址详情</nz-form-explain>
      <nz-form-explain *ngIf="validateForm.get('address').dirty && validateForm.get('address').hasError('maxlength')">不能超过60个字</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <div *ngIf="entity.publicTicket" style="text-align: center;">
    <h3>店铺二维码</h3>
    <img src="{{wxPublicImgDomain+entity.publicTicket}}" width="300" alt="店铺二维码"/>
  </div>
  <div class="modal-footer">
    <button nz-button type="button" (click)="close()">关闭</button>
    <button nz-button type="submit" [nzType]="'primary'" >保存</button>
  </div>
</form>
